<template>
	<view class="myincome-page">
		<view class="myincome-page-header">
			<mynavBar :title="title" :gps="gps" :bgcolor="bgColor" :backgrouncolor="backgrouncolor"></mynavBar>
		</view>
		<view class="myincome-page-contetn">
			<view class="page-contetn-header">
				<view style="padding: 0 40rpx;">
					<view class="contetn-header">
						<view class="contetn-header-left" @click="changeselesc(0)"
							:class="selectindex==0?'contetn-header-leftactive':''">
							<span>余额</span>
						</view>
						<view class="contetn-header-left" @click="changeselesc(1)"
							:class="selectindex==1?'contetn-header-leftactive':''">
							<span>答主收益</span>
						</view>
					</view>
				</view>
				<view class="contetn-body-header" v-if="selectindex==0">
					<view class="body-header-left">
						<img src="/static/myincomelogo1.png" alt="" style="width: 50rpx;height: 50rpx;">
						<span style="margin: 0 11rpx;">余额:&nbsp;</span>
						<span>{{ (balance/100).toFixed(2) || 0 }}&nbsp;元</span>
					</view>
					<view style="display: flex;">
						<view class="body-header-rightbtn" style="margin-right: 20rpx;" @click="recharge">
							<span>充值</span>
						</view>
						<view class="body-header-rightbtn" @click="swichpopular">
							<span>提现</span>
						</view>

					</view>
					<view class="body-header-rightbtn2" @click="payoutDetailsClick">
						<span>提现明细</span>
					</view>
				</view>

				<view class="contetn-body-header" v-else>
					<view class="body-header-left">
						<img src="/static/myincomelogo1.png" alt="" style="width: 50rpx;height: 50rpx;">
						<span style="margin: 0 11rpx;">答主收益:&nbsp;</span>
						<span>{{ (income/100).toFixed(2) || 0 }}&nbsp;元</span>
					</view>
					<!-- 			<view style="display: flex;">
						<view class="body-header-rightbtn" style="margin-right: 20rpx;" @click="recharge">
							<span>充值</span>
						</view>
						<view class="body-header-rightbtn" @click="swichpopular">
							<span>提现</span>
						</view>
					</view> -->
				</view>
				<view class="body-mdiel-selecttime" @click="switchtime">
					<span style="margin-right: 10rpx;">{{timeval}}</span>
					<uni-icons :type="timeblean?'top':'bottom'" size="20" color="#999999"
						style="margin-top: 5rpx;"></uni-icons>
				</view>
			</view>
			<view class="page-contetn-body">
				<!-- 内容部分 -->
				<view class="contetn-body-mdiel">

					<view class="body-mdiel-list">
						<view class="mdiel-list" v-for="(item,index) in balanceInfo?.list" :key="item.id">
							<view class="mdiel-list-left">
								<span
									style="width: 75%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.describe}}</span>
								<span :style="item.type=='获得'?'color: #F09500;':''"
									class="list-left-right">{{(item.type=="获得")?`+${(item.change_val/100).toFixed(2)}`:`-${(item.change_val/100).toFixed(2)}`}}</span>
							</view>
							<view class="mdiel-list-right">
								<span
									class="list-left-time">{{ $utils.dateFormat(item.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
							</view>
						</view>
						<u-loadmore :status="status" />
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker @cancel="canceltime" @confirm="confirmtiem" :show="showtime" v-model="timevalue"
			mode="year-month"></u-datetime-picker>
		<!-- 弹出框 -->
		<u-popup :show="show" @close="close" :safeAreaInsetBottom="false" mode="center" :round="10" @open="open">
			<view class="popularcontent">
				<img src="/static/myincomelogo2.png" alt="" style="width: 60rpx;height: 60rpx;">
				<span style="margin-top: 15rpx; margin-bottom: 36rpx; display: inline-block;">提现说明</span>
				<!-- 余额小于20 -->
				<view class="popularcontent-contentone" v-if="unm<2000 ">
					<p>答主收益不足20元</p>
					<span>无法提现</span>
					<view class="popularcontent-contentone-btn" @click="()=>this.show=false">
						<span>确定</span>
					</view>
				</view>
				<!-- 余额大于等于20 -->
				<view class="popularcontent-contentwo" v-if="unm>=2000">
					<span>提现申请后72小时内打入到你的支付宝钱包，系统将自动扣除{{platformRatio * 100}}%的手续费。</span>
					<view class="popularcontent-contentwo-btn">
						<view class="contentwo-btn-left" @click="()=>this.show=false">
							<span>取消</span>
						</view>
						<view class="contentwo-btn-left" style="background: #F09500;" @click="payouts">
							<span>确定</span>
						</view>
					</view>
				</view>

			</view>



		</u-popup>
	</view>
</template>

<script>
	import {
		timeTwo
	} from '/utils/timenew.js'

	export default {
		data() {
			return {
				ismyMoney: 0,
				balancelist: [],
				timeblean: false,
				timeval: '',
				showtime: false,
				timevalue: Number(new Date()),
				show: false,
				unm: 2000,
				selectindex: 0,
				title: '资金明细',
				gps: '',
				backgrouncolor: '#fff',
				bgColor: 'rgba(165, 42, 42, 0)',
				balanceInfo: {}, //获取到的资金数据
				startYearMonth: '', //开始年月时间
				endYearMonth: '', //结束年月时间
				status: 'loadmore', //更多
				offset: 1, //页数
				limit: 6, //条数
				pages: 0, //总条数
				isOffset: false, //是否分页
				income: 0, //收益
				balance: 0, //余额
				platformRatio: 0
			};
		},

		methods: {
			getRewardRatioConfig() {
				const field_string = `id platform questioner answer type`;
				this.$store.dispatch("remote/query", {
					model: "reward_ratio_config",
					where: {
						type: {
							_eq: "提现手续费"
						},
					},
					field_string: field_string
				}).then(res => {
					this.platformRatio = res.data.platform
				})
			},
			render(type) {
				let data = {
					operate: "1",
					offset: this.offset,
					limit: this.limit,
					user_user: uni.getStorageSync('userInfo').id,
					start_year_month: this.startYearMonth,
					end_year_month: this.endYearMonth
				}
				if (type === 0) {
					data.operate = "1"
					this.$store.dispatch('remote/callActionflowOffset', {
						response_key: "getBalance",
						actionflow_name: "订单_查询资金",
						isOffset: this.isOffset,
						key: "list",
						isother: true,
						payload: data,
					}).then(res => {
						this.balanceInfo = JSON.parse(JSON.stringify(res?.data_other ?? {}))
						this.balanceInfo["list"] = res.data_list;
						console.log("1111111", this.balanceInfo);
					})
				}
				if (type === 1) {
					data.operate = "2"
					this.$store.dispatch('remote/callActionflowOffset', {
						response_key: "getIncome",
						actionflow_name: "订单_查询资金",
						isOffset: this.isOffset,
						key: "list",
						isother: true,
						payload: data,
					}).then(res => {
						this.balanceInfo = JSON.parse(JSON.stringify(res?.data_other ?? {}))
						this.balanceInfo["list"] = res.data_list;
						this.pages = this.balanceInfo.pages;
						console.log('111111111111111', res)
					})
				}
			},
			switchtime() {
				this.showtime = true
				this.timeblean = true
			},
			confirmtiem(e) {
				if (e.value) {
					this.showtime = false
					this.timeblean = false
					this.timeval = timeTwo(e.value)
					let date = new Date(e.value)
					let year = date.getFullYear()
					let month = date.getMonth()
					this.startYearMonth = new Date(year, month).getTime()
					this.endYearMonth = new Date(year, month + 1).getTime()
					console.log("222222222", this.selectindex)
					this.render(this.selectindex)
				}
			},
			canceltime() {
				this.timeblean = false
				this.showtime = false
			},
			swichpopular() {

				let userId = uni.getStorageSync('userInfo').id
				//查询金额
				this.$store.dispatch('remote/query', {
					model: "user_assets",
					limit: -1,
					field_string: 'user_user balance',
					where: {
						user_user: {
							_eq: userId
						}
					}
				}).then(rs => {
					// if (rs.data.balance >= 2000) {
					// uni.navigateTo({
					// 	url: `/pages_a/withdrawal/withdrawal`
					// })
					this.unm = rs.data.balance
					console.log("num", this.unm);
					this.show = true
					// }
				})
			},
			//提现
			payouts() {
				let userId = uni.getStorageSync('userInfo').id
				//查询金额
				this.$store.dispatch('remote/query', {
					model: "user_assets",
					limit: -1,
					field_string: 'user_user balance',
					where: {
						user_user: {
							_eq: userId
						}
					}
				}).then(rs => {
					if (rs.data.balance >= 2000) {
						uni.navigateTo({
							url: `/pages_a/withdrawal/withdrawal`
						})
					}
				})


			},
			recharge() {
				uni.navigateTo({
					url: `/pages_a/myrecharge/myrecharge`
				})
			},
			close() {
				this.show = false
			},
			open() {

			},
			payoutDetailsClick() {
				uni.navigateTo({
					url: `/pages_a/withdrawalDetails/withdrawalDetails`
				})
			},
			changeselesc(val) {
				this.isOffset = false
				this.offset = 1
				this.selectindex = val
				this.render(this.selectindex)
			},
			getIcome() {
				this.$store.dispatch("remote/query", {
					model: 'user_assets',
					isloading: false,
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id
						}
					},
					field_string: 'id type balance describe status user_assets_detail_aggregate(where:{blean: {_eq: true} type:{_ilike:"获得"}}){aggregate{sum{change_val}}}'
				}).then(res => {
					this.balance = res.data.balance
					this.income = res.data.user_assets_detail_aggregate.aggregate.sum.change_val
				})
			}
		},
		//加载更多
		onReachBottom() {
			if (this.offset * this.limit >= this.pages) return
			this.isOffset = true
			this.status = 'loading'
			this.offset = ++this.offset
			setTimeout(() => {
				this.render(this.selectindex)
				if (this.offset * this.limit >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			//#endif
			this.getIcome()
			//获取当前年月
			let currentDate = new Date()
			let year = currentDate.getFullYear()
			let month = currentDate.getMonth()
			this.startYearMonth = new Date(year, month).getTime()
			this.endYearMonth = new Date(year, month + 1).getTime()
			this.timeval = timeTwo(new Date())
			this.render(this.selectindex)
			this.getRewardRatioConfig()
		}
	}
</script>

<style lang="scss" scoped>
	.myincome-page {
		width: 100%;
		height: 100vh;

		.popularcontent {
			width: 595rpx;
			height: 440rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.8);
			line-height: 40rpx;
			box-sizing: border-box;
			padding-top: 23rpx;

			.popularcontent-contentone {
				font-size: 36rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #666666;
				line-height: 50rpx;
				text-align: center;

				.popularcontent-contentone-btn {
					width: 455rpx;
					height: 70rpx;
					background: #F09500;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					margin-top: 42rpx;
					line-height: 70rpx
				}
			}

			.popularcontent-contentwo {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #929292;
				line-height: 40rpx;
				box-sizing: border-box;
				padding: 0 55rpx;

				.popularcontent-contentwo-btn {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 22rpx;

					.contentwo-btn-left {
						width: 215rpx;
						height: 70rpx;
						background: #999999;
						border-radius: 80rpx 80rpx 80rpx 80rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #FFFFFF;
						line-height: 70rpx;
					}
				}
			}
		}

		.myincome-page-header {
			width: 100%;
			height: 343rpx;
			// background-color: red;
		}

		.myincome-page-contetn {
			width: 100%;
			height: 100%;
			margin-top: -150rpx;

			.page-contetn-header {
				width: 100%;
				box-sizing: border-box;
				position: fixed;
				background: #FFFFFF;
				padding-bottom: 20rpx;

				.contetn-header {
					width: 100%;
					height: 96rpx;
					background: #F4F4F4;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					box-sizing: border-box;
					padding: 8rpx;
					display: flex;

					.contetn-header-left {
						width: 50%;
						height: 100%;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0-75 SemiBold, Alibaba PuHuiTi 20;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8);
						line-height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.contetn-header-leftactive {
						background: #F09500;
						border-radius: 12rpx;
						color: #fff;
					}
				}

				.contetn-body-header {
					padding-top: 40rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 70rpx;
					padding: 40rpx 40rpx 0 40rpx;

					.body-header-left {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #408EFF;
						line-height: 35rpx;
						display: flex;
						align-items: center;
					}

					.body-header-rightbtn {
						width: 123rpx;
						height: 50rpx;
						background: linear-gradient(101deg, #FFE6B8 0%, #f5b03f 30%, #F09500 100%);
						border-radius: 25rpx 25rpx 25rpx 25rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #FFFFFF;
						line-height: 50rpx;
					}

					.body-header-rightbtn2 {
						width: 123rpx;
						height: 50rpx;
						background: linear-gradient(101deg, #FFE6B8 0%, #f5b03f 30%, #F09500 100%);
						border-radius: 25rpx 25rpx 25rpx 25rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #FFFFFF;
						line-height: 50rpx;
					}
				}

				.body-mdiel-selecttime {
					width: 100%;
					display: flex;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					// align-items: flex-start;
					line-height: 45rpx;
					padding-left: 27rpx;
				}
			}

			.page-contetn-body {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding-top: 320rpx;

				/* 内容部分 */
				.contetn-body-mdiel {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					padding: 0 27rpx;

					.body-mdiel-list {
						width: 100%;
						flex: 1;
						overflow: hidden;
						overflow-y: auto;

						.mdiel-list {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 100%;
							height: 130rpx;
							border-bottom: 1rpx solid #ccc;
							box-sizing: border-box;
							padding: 32rpx 0 13rpx 0;

							.mdiel-list-left {
								font-size: 24rpx;
								font-family: Source Han Sans CN-Normal, Source Han Sans CN;
								font-weight: 350;
								color: #333333;
								line-height: 42rpx;
								display: flex;
								justify-content: space-between;

								.list-left-right {
									font-size: 30rpx;
									font-family: Source Han Sans CN-Bold, Source Han Sans CN;
									font-weight: 700;
									color: #999999;
									line-height: 42rpx;
								}

							}

							.mdiel-list-right {
								height: 100%;
								text-align: left;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Normal, Source Han Sans CN;
								font-weight: 350;
								color: #999999;
								line-height: 42rpx;
							}
						}

					}
				}

			}
		}
	}
</style>